<template>
	<view class="mian">		
		<!-- #ifdef MP-WEIXIN -->
		<navbar  title="订单详情" :isGoBack="true" :isNotice="true" :bgColor="bgColor" :btnColors='btnColor' :visible="true" ></navbar>
		<!-- #endif -->	
		<view class="flex ml-30 mt-30 mb-25 align-center text-center" v-if="goods_info.status==0">
			<image src="../../../static/resource/points_wait.png" mode="aspectFill" style="width:60rpx;height: 60rpx;"></image>
			<text class="ml-15" style="color: #AFACA1 ;">待发货</text>
		</view>
		
		<view class="flex ml-30 mt-30 mb-25 align-center text-center" v-if="goods_info.status==1">
			<image src="../../../static/resource/points_send.png" mode="aspectFill" style="width:60rpx;height: 60rpx;"></image>
			<text class="ml-15" style="color: #AFACA1 ;">已发货</text>
		</view>
		
		<view class="flex ml-30 mt-30 mb-25 align-center text-center" v-if="goods_info.status==2">
			<image src="../../../static/resource/points_finish.png" mode="aspectFill" style="width:60rpx;height: 60rpx;"></image>
			<text class="ml-15" style="color: #000 ;">已完成</text>
		</view>
		
		<view class="main-cur pb-20">	
			
			
			<view class="pt-10">
				<view class="address-title border-b">
					收货地址
				</view>		   
			    <view isLink v-if="goods_info.address !=''" class="flex " style="height: 110rpx;background-color: #fff;padding-left: 30rpx;" >
					<view slot="icon" class="flex  justify-start confirm-address-icon">
						<u-icon  color="#2979ff" size="28" :name="api_url+'/static/upload/4a3840ad5ac741bd/2af6be447920c655.png'"></u-icon>
					</view>
					<view class="flex justify-between mt-15" style="width: 100%">
						<view  class="flex flex-direction  confirm-address-wrap ml-15">
							<view class="m-5">					  
								<text class="text-lg" style="color: #000000;">{{goods_info.address.realname}}</text>
								<text  class="ml-10 text-lg">{{goods_info.address.phone}}</text>
							</view>
							<view class="flex mt-5">
							   <view class="confirm-address-wrap-detail text-df text-gray">{{goods_info.address.province}}{{goods_info.address.city}}{{goods_info.address.region}}{{goods_info.address.address}}</view>
							</view>
					  </view>	     
				   </view>
			    </view>			   
			</view>						
		</view>	
		<view class="main-cur mt-20">
			<view class="address-title border-b">
				商品清单
			</view>
			<view class="flex pl-35">
				<view slot='icon' class="flex align-center">
					<image class="grid-img" :src="goods_info.goods_image" bindtap="handleChangeGoods" 	mode="scaleToFill"></image>
			    </view>
				<view class=" flex flex-direction ml-10"  style="width: 100%;">
					<view class="flex" style="flex-direction:column;margin-top: 20rpx;">
						<view class='flex align-center cell ellipsis-l2 text-content goods_title' style="color: #4D4D4D;">{{goods_info.goods_title}}</view>						
					</view>
					<view class="flex justify-between" style="margin-top: 20rpx; color: #999999;">
						<view class='flex align-center cell ellipsis-l2 '>{{goods_info.goods_desc}}</view>	
						<view style="margin-right: 5rpx;">×1</view>
					</view>
					<view class="flex mt-20 align-center text-center">
						<view class='flex align-center cell  text-content' style="color: #000000 ;font-weight: bold;">积分 </view>
						<view class='flex  ml-10 cell  text-content' style="color: #FE6200;">{{goods_info.goods_points}}</view>
					</view>
				</view>
			</view>					
					
		</view>	
		
		<view class="flex mt-20 align-center justify-between align-center pl-20 pt-20 pb-20" style=" background: #fff; height: 80rpx;width: 100%; margin-bottom: 10rpx;">
			<view class="flex mt-15 justify-between mr-20" style="width: 100%;">
				<view class="address-title">订单备注</view>
				<input  :value="goods_info.remark" class="uni-input mr-30 text-right" focus placeholder="50字以内（选填）" disabled="" />	
			</view>			
		</view>		
			
		<view class="flex mt-20 align-center justify-between align-center pl-20 pt-20 pb-20" style=" background: #fff; height: 80rpx;width: 100%; margin-bottom: 10rpx;">
			<view class="flex mt-15 justify-between mr-30" style="width: 100%;">
				<view class="address-title">订单编号</view>
				<view class="flex align-center text-center">
				    <text style="color: #999999;">{{goods_info.order_no}}</text>
					<text class="copy ml-20" @click="copy(goods_info.order_no)">复制</text>
					
				</view>
			</view>			
		</view>		
		
		<view class="flex mt-20 align-center justify-between align-center pl-20 pt-20 pb-20 mr-20" style=" background: #fff; height: 80rpx;width: 100%; margin-bottom: 20rpx;">
			<view class="flex mt-15 justify-between mr-30" style="width: 100%;margin-right: 80rpx;">
				<view class="address-title">创建时间</view>				
				<text style="color: #999999;">{{goods_info.create_at}}</text>			
			</view>			
		</view>		
		<view class="submit" @click="paykd(goods_info.id)" v-if="goods_info.status==1">
			<view class="btnsub wrap">
				查看物流
			</view>
		</view>	 
		<view class="flex mb-30" style=""></view>		 		
	
	
	</view>
</template>

<script>
	import address from "@/components/address/index.vue";
	import submit from "@/components/submit-bar/index.vue";
	import picker from "@/components/date-picker/index.vue";
	
	export default {
		components: {
		   "biz-address": address,
		   "t-submit-bar": submit,
		   "date-picker": picker,
		},
		data () {
			return {	
				...getApp().globalData.config,
				orderId:'',
				goods_info:''
				
			}
		},
		onLoad(options) {	
			this.orderId=options.id
				  
		},		      
		onShow(){
		     this.goodsInfo()
		},
		methods:{			
			//获取商品信息
			goodsInfo(){
				let that=this 
				let obj_data={
				   token:uni.getStorageSync('userInfo').token,
				   orderId:this.orderId
				}  
				
			    this.$http.changeGoodslog(obj_data).then(res =>{
				 if(res.resCode=="9999"){
				    that.goods_info=res.data.list[0]
				 }else{
				   uni.showToast({title:res.resMessage,icon:"none"})
				 }
			 })
			},	
			//复制
			copy(text){
				uni.setClipboardData({
					   data:text,//要被复制的内容
					   success:()=>{
						 uni.showToast({
						   title:"复制成功"
						 })
					   }
					});
			
			},
			//快递信息
			paykd(id){
				this.$routers.router('/pages/pagesuser/points/order_kd?id='+id,'navigateTo') 
			}
		}
	}
</script>

<style>
	@import "./settlement.css";
</style>